<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="@{/basic/head}::header(title='菜单')"></div>
		<link rel="stylesheet" href="" th:href="@{/custom/css/index.css}">
	</head>
	<body>
		<div class="body-content">
			<form class="my-layui-form layui-form " action="" id="searchConditionForm">
				<div class="layui-form-item my-layui-form-item">
					<div class="layui-inline">
						<label class="my-layui-form-label layui-form-label ">ID</label>
						<div class="my-layui-input-inline layui-input-inline ">
							<input type="text" name="id" lay-verify="number" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="my-layui-form-label layui-form-label ">名称</label>
						<div class=" my-layui-input-inline layui-input-inline ">
							<input type="text" name="name" id="name" lay-verify="required" placeholder=""
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="my-layui-form-label layui-form-label ">状态</label>
						<div class="my-layui-input-inline layui-input-inline ">
							<input type="text" name="status" lay-verify="required" autocomplete="off"
								class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn my-layui-btn" lay-submit=""
							lay-filter="demo1">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary my-layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
			<div class="table-content">
				<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
			</div>
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
					<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
					<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
				</div>
			</script>

			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
			<script>
				var table; //定义个table表的全局变量
				var form; //定义表单全局变量
				//获取表单区域所有值进行查询
				layui.use('form', function() {
					form = layui.form;
					form.on('submit(demo1)', function(data) {
						//table 为前面表单初始化时创建的对象，通过他重载
						table.reload('dataTable', { //dataTable是table的id
							where: {
								data: data.field
							}, //获取表单填写的内容
							page: {
								start: 1 //重新从第 1 页开始
							}
						});
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				});

				var tableIns = layui.use('table', function() {
					table = layui.table;
					table.render({
						elem: '#dataTable',
						toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
						defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						url: '/menu/findMenuPage',
						method: 'post', //如果无需自定义HTTP类型，可不加该参数
						contentType: 'application/json',
						loading: true,
						where: {
							data: form.val("demo1")
						},
						limit: 2,
						request: {
							pageName: 'start', //页码的参数名称，默认：page
							limitName: 'limit' //每页数据量的参数名，默认：limit
						},
						response: {
							statusName: 'code', //规定数据状态的字段名称，默认：code
							statusCode: 2000, //规定成功的状态码，默认：0
							msgName: 'msg', //规定状态信息的字段名称，默认：msg
							countName: 'count', //规定数据总数的字段名称，默认：count
							dataName: 'data' //规定数据列表的字段名称，默认：data
						},
						parseData: function(res) { //res 即为原始返回的数据
							console.log(res);
							return {
								"code": res.code, //解析接口状态
								"msg": res.message, //解析提示文本
								"count": res.total, //解析数据长度
								"data": res.data //解析数据列表
							};
						},
						done: function(res, curr, count) {
							//如果是异步请求数据方式，res即为你接口返回的信息。
							//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
							console.log(res);

							//得到当前页码
							console.log(curr);

							//得到数据总量
							console.log(count);
						},
						//cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						cols: [
							[{
								field: 'title',
								title: '菜单列表',
								colspan: 5,
								align: 'center'
							}],
							[ //标题栏
								{
									type: 'checkbox',
									align: 'center'
								},
								{
									field: 'id',
									title: 'ID',
									sort: true,
									align: 'center'
								} //rowspan即纵向跨越的单元格数
								, {
									field: 'name',
									title: '名称',
									edit: 'text',
									align: 'center'
								}, {
									field: 'status',
									title: '状态',
									templet: function(res) {
										if (res.status === 0)
											return '<em>禁用</em>'
										else
											return '<em>启用</em>'
									},
									align: 'center'
								}, {
									fixed: 'right',
									title: '操作',
									toolbar: '#barDemo',
									width: 120,
									align: 'center'
								}
							]
						],
						page: true

					});
					//头工具栏事件
					table.on('toolbar(dataTable)', function(obj) {
						var checkStatus = table.checkStatus(obj.config.id);
						switch (obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
								var data = checkStatus.data;
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;

								//自定义头工具栏右侧图标 - 提示
							case 'LAYTABLE_TIPS':
								layer.alert('这是工具栏右侧自定义的一个图标按钮');
								break;
						};
					});

					//监听行工具事件
					table.on('tool(dataTable)', function(obj) {
						var data = obj.data;
						//console.log(obj)
						if (obj.event === 'del') {
							layer.confirm('真的删除行么', function(index) {
								obj.del();
								layer.close(index);
							});
						} else if (obj.event === 'edit') {
							layer.prompt({
								formType: 2,
								value: data.email
							}, function(value, index) {
								obj.update({
									email: value
								});
								layer.close(index);
							});
						}
					});
				});
			</script>
		</div>
	</body>
</html>
